<template>
  <el-dialog title="编辑资源" :visible.sync="visible" :before-close="closeDialogue" width="30%" append-to-body>
    <el-form :model="formData">
      <el-form-item label="资源名称：" label-width=''>
        <el-input v-model="formData.name" autocomplete="off" required="true" style="width:250px"></el-input>
      </el-form-item>
      <el-form-item label="资源注释：" label-width=''>
        <el-input v-model="formData.imgNote" autocomplete="off" style="width:250px"></el-input>
      </el-form-item>
      <el-form-item label="资源文件：" label-width=''>
        <jdldUpload class="upload-template"
          :onSuccess="uploadResourceSuccess"
          :minSize="50"
          :chunkSize="10"
          :isMulti="true"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.GIF,.BMP"
          :onProgress="uploadProgress"
          >
          <el-button type="success" size="small" >上传文件</el-button>
        </jdldUpload>
      </el-form-item>
      <el-form-item label="" v-for="(item, index) in progressItemArr" :key="index" >
        <span :title="item.originName">{{item.originName}}</span><span @click="removeFile(item)" style="margin-left:15px;color:#57c5b3;cursor:pointer;">删除</span><br>
        <el-progress :percentage="item.percent" ></el-progress>
      </el-form-item>
      <el-form-item label="音频文件：" >
        <jdldUpload class="upload-template"
          :onSuccess="uploadResourceAudioSuccess"
          :minSize="50"
          :chunkSize="10"
          :isMulti="true"
          accept=".mp3"
          :onProgress="uploadAudioProgress"
          >
          <el-button type="success" size="small" >上传文件</el-button>
        </jdldUpload>
      </el-form-item>
      <el-form-item label="" v-for="(item, index) in progressAudioArr" :key="index" >
        <span :title="item.originName">{{item.originName}}</span><span @click="removeAudioFile()" style="margin-left:15px;color:#57c5b3;cursor:pointer;">删除</span><br>
        <el-progress :percentage="item.percent" ></el-progress>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="add()" >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import jdldUpload from "../upload/upload";
  export default {
    name: "InputDialog",
    components: {
      jdldUpload,
    },
    data() {
      return {
        visible: false,
        itemWidth:'160px',
        progressItemArr:[],
        progressAudioArr:[],
      }
    },
    props: {
      formData: {
        type: Object,
        default: {},
      },
      resourceId: {
        type: String,
        default: '',
      },
    },
    methods: {
      add(){
        let param = JSON.parse(JSON.stringify(this.formData))
        param.cateId=this.cateId;
        param.resourceId=this.resourceId;
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseResource/addGroupResource", param)
          .then(() => {
            this.$emit('get-table-data');
        })
        this.visible = false
      },
      cancel(){
        this.closeDialogue();
      },
      closeDialogue(){
        this.visible = false
        this.progressItemArr = []
        this.progressAudioArr = []
      },
      uploadResourceSuccess(resp){
        this.formData.path=resp.url;
        this.formData.fileName=resp.originName;
      },
      removeFile(){
        this.formData.path='';
        this.formData.fileName='';
        this.progressItemArr = []
      },
      uploadResourceAudioSuccess(resp){
        this.formData.audioPath=resp.url;
      },
      removeAudioFile(){
        this.formData.audioPath=''
        this.progressAudioArr=[]
      },
      uploadProgress(resp){
        let temp = {}
        for(let i=0;i<this.progressItemArr.length;i++){
          let item = this.progressItemArr[i]
          if(item.id==resp.id){
            temp = item
          }
        }
        if(temp.id){
          temp.percent=Number(resp.percent)
        }else{
          let item = {id:resp.id,percent:Number(resp.percent),originName:resp.originName}
          this.progressItemArr=[]
          this.progressItemArr.push(item)
        }
      },
      uploadAudioProgress(resp){
        let temp = {}
        for(let i=0;i<this.progressAudioArr.length;i++){
          let item = this.progressAudioArr[i]
          if(item.id==resp.id){
            temp = item
          }
        }
        if(temp.id){
          temp.percent=Number(resp.percent)
        }else{
          let item = {id:resp.id,percent:Number(resp.percent),originName:resp.originName}
          this.progressAudioArr=[]
          this.progressAudioArr.push(item)
        }
      },
    }
  }
</script>

<style scoped>

</style>
